<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>论坛详情页</title>
		<link href="${rc.contextPath}/css/page.css" rel="stylesheet">
		<link href="${rc.contextPath}/css/style.css" rel="stylesheet">
		<link href="${rc.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
		<script src="${rc.contextPath}/js/jquery.1.10.1.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/js/jquery.lib.min.js"></script>
		<script src="${rc.contextPath}/bootstrap/js/bootstrap.min.js"></script>
		<!-- Bootstrap -->
		<style type="text/css">
			body {
				background-color: #eaeaea;
			}
			
			.forum-title {
				color: #0092EF;
				text-decoration: none;
			}
			
			.username a {
				color: #2d64b3;
				text-decoration: none;
			}
			
			.content> ul>li:hover {
				background-color: #EAEAE8;
			}
		</style>
	</head>

	<body>

		<!--   nav     -->
		#parse("header.html")

		<div id="container">

			<!--  左侧个人中心 -->
			<div class="sidebar">
				<div class="panel">
					<div class="panel-heading">
						<h4 class="panel-title"><b>我在论坛</b></h4>
					</div>
					<div class="panel-body">
						<a href="#">
							<img class="img-thumbnail" src="http://127.0.0.1:8080/image/portrait/$!{curr_user.portrait}" width="80px" />
						</a>
						<div>
							<div class="username">用户名：
								<a href="#">$!{curr_user.nickname}</a>
							</div>
							<div class="user-auth">用户组：普通用户</div>
						</div>
						<div class="clearfix"></div>
						<div class="list-group">
							<a class="list-group-item" style="border: 0px;">
								<span class="glyphicon glyphicon-envelope"></span>&nbsp;消息
								<span class="badge">0</span>
							</a>
							
							<a class="list-group-item" style="border: 0px;">
								<span class="glyphicon glyphicon-book"></span>&nbsp;我的帖子
							</a>
							<a class="list-group-item" style="border: 0px;">
								<span class="glyphicon glyphicon-bookmark"></span>&nbsp;我的收藏
							</a>
						</div>

						<a type="button" class="btn btn-primary btn-lg btn-block" href="#followForm">
							<span class="glyphicon glyphicon-edit"></span>&nbsp;快速回复
						</a>
						<table class="table">
							<tr>
								<td>精品帖子
								<br/>
								&nbsp;10
								</td>
							<td><a href="${rc.contextPath}/forum/list/1">所有帖子</a><br/></td>
							</tr>
							
						</table>

					</div>
				</div>
			</div>

			<!--  右侧帖子列表   -->
			<div class="content">
				<div style="background-color: #FFFFFF;">

					<div class="info-title" style="border-bottom: 1px solid #000000;">
						<div style="width: 20%; float: left; font-size: 15px;  height: 80px; line-height: 80px; text-align: center;">
							<div>
								<span class="glyphicon glyphicon-eye-open text-muted"></span><span style="color: #DB0000">20</span> | 回复：<span style="color: #DB0000">$!page.totalRecord</span>
							</div>
						</div>
						<div style="width: 80%; float: right; height: 80px; line-height: 80px; font-size: 18px; padding-left: 40px; font-weight: bold;">
							$!{forumPost.post_title}
							#if($!collection)
                        	<a class="jd_collection collected pull-right" data-id="$!forumPost.id" href="#" title="取消收藏"></a>
                        	#else
							<a class="jd_collection pull-right" id="post_collect" data-id="$!forumPost.id" href="#" title="收藏"></a>
							#end
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="info-first" style="border-bottom: 1px solid #67B168;background-color: #FFFFFF;">
						<div style="width: 25%; float: left; font-size: 16px;  padding-bottom: 40px;border-right: 1px solid #ebebeb;">
							<img src="http://127.0.0.1:8080/image/portrait/$!forumPost.post_starter.portrait" alt="..." style="margin: 40px 40px 20px 25%; width: 50%; height: 100px">
							<div style="padding-left: 70px;">$!{forumPost.post_starter.nickname}</div>
							
						</div>
						<div style="width: 75%; float: right;background-color: #FFFFFF;margin-bottom: 0px;">
							<div style="padding: 20px 20px 10px 0; text-align: right; border-bottom: 1px solid #ebebeb;">
								 发布于：$!{forumPost.gmt_create}
							</div>
							<div style="margin: 40px 30px 30px 30px; font-size: 14px;">
								$!{forumPost.post_content}
							</div>
						</div>
						
						
						<div style="clear: both;"></div>
					</div>
					#foreach($!follow in $!followList)
					<div style="position: relative;background-color: #FFF7D0;">
						<div style="width: 25%; float: left; font-size: 16px;">
							<img src="http://127.0.0.1:8080/image/portrait/$!follow.follow_user.portrait" alt="..." style="margin: 40px 40px 20px 25%; width: 50%; height: 100px; background-color: red;"> 
							<div style="padding-left: 70px;">昵称:$!follow.follow_user.nickname</div>
						</div>
						<div style="width: 75%; float: right;background-color: #FFFFFF;">

							<div style="margin: 40px 30px 30px 10px; font-size: 14px; overflow: auto; height: 230px;">
								#if($!{follow.parent_follow})
								<div style="background-color: #e9e8e8; padding: 10px 5px 10px 20px; margin-bottom: 10px;">
									$!{follow.parent_follow.follow_user.nickname}&nbsp;&nbsp;&nbsp;发表于$!{follow.parent_follow.gmt_create}<br /> $!{follow.parent_follow.follow_content}
								</div>
								#end
								
								<span style="padding-left: 20px;">$!follow.follow_content</span>
							</div>

						</div>
						
						
						<div class="panel-heading" style="position: absolute; bottom: 0px; width: 75%; left: 25%; margin-bottom: 0px; float: right;">
							<a class="btn btn-default dropdown-toggle pull-right" data-toggle="dropdown" style="margin-right: 15px;">
								回复<span class="caret"></span>
							</a>
							<div class="dropdown-menu panel-body pull-right" role="menu">
								<form action="${rc.contextPath}/forum/addForumFollow" method="post" id="floorForm">
									<input type="hidden" name="follow_post_id" value="$!{forumPost.id}">
									<input type="hidden" name="follow_parent_id" value="$!{follow.id}" />
									<textarea name="follow_content" style="width: 100%; height: 100%" id="follow_content" required="required"></textarea>
									<button type="submit" class="btn btn-primary" id="fabu">回复</button>
									<span style="margin-left: 10px; color: red;" id="errorFloorMsg"></span>
								</form>
							</div>
						</div>	
						
						<div style="clear: both;"></div>
					</div>
					#end
				</div>
			
				<div class="pagination" style="margin: 0px 0 20px;">$!page.pageString</div>
				
				<div style="margin-bottom: 20px; margin-top: 20px;">
					<span class="glyphicon glyphicon-edit"></span>
						<font
						size="3"><b>发表回复</b></font> 
					<form action="${rc.contextPath}/forum/addForumFollow" method="post"
						id="followForm">
						<input type="hidden" name="follow_post_id" value="$!{forumPost.id}">
						<div style="padding: 2px 2px 2px 2px;">
		
							<div style="margin: 5px 5px 5px 5px;">
								<input type="hidden" name="follow_parent_id" value="0" />
								<textarea name="follow_content" style="width: 100%; height: 100px;"
									id="follow_content" required="required"></textarea>
								<span style="margin-left: 10px; color: red;" id="errorFollowMsg"></span>
								<input type="submit" id="fabu" class="btn btn-info" value="发布"
									style="float: right; margin-top: 10px;" />
		
								<div style="clear: both;"></div>
							</div>
						</div>
					</form>
				</div>
			
			</div>

		</div>

		<a id="backtop" title="回到顶部" rel="nofollow"></a>
		
		
	</body>
	
	<script type="text/javascript">
	$(document)
	.on(
			"click",
			".pagination a",
			function(e) {
				var pageNum = $(this).attr("pageData");
				if (pageNum == 0 || isNaN(pageNum)) {
					return;
				}
				
				window.location.href = "${rc.contextPath}/forum/detail/$!{forumPost.id}/"+ pageNum;
			});
	
	$(document)
	.on(
			"click",
			"#post_collect",
			function(e) {
				jQuery.ajax({
					url	:	"${rc.contextPath}/user/collect/post/?postId="+$(this).data("id"),
					type:	"get",
					dataType:"json",
					success:	function(data){
						if(data.code == 200){
							alert(data.info);
							location.reload();
						}else{
							alert(data.info);
						}
					}
				});
			});
	
	</script>

</html>